/*日历和时钟的内容*/
@media screen and (min-aspect-ratio: 8/7) and (max-aspect-ratio: 3/1), screen and (max-aspect-ratio: 3/5) {
    /*长*/
    #clock::after {
        content: '';
        width: 70%;
        height: calc(0.5em + 1px);
        background-color: var(--color2);
        position: absolute;
        top: 61%;
        left: 15%;
    }

    year::after {
        content: "-";
    }

    #cYM {
        color: var(--color2);
        display: block;
        width: 100%;
        margin: 0;
        text-align: center;
        position: absolute;
        white-space: nowrap;
        left: 0;
        top: 6%;
        font-size: 23em;
    }

    #cD {
        color: var(--color);
        display: block;
        width: 100%;
        margin: 0;
        text-align: center;
        position: absolute;
        left: 0;
        top: 19%;
        font-size: 65em;
        text-shadow: .03em .03em .05em #0001;
    }

    #cW {
        color: var(--color2);
        display: block;
        width: 100%;
        margin: 0;
        text-align: center;
        position: absolute;
        left: 0;
        top: 65%;
        font-size: 15em;
    }

    #cN {
        color: var(--color3);
        display: block;
        width: 100%;
        margin: 0;
        text-align: center;
        position: absolute;
        left: 0;
        top: 80%;
        font-size: 10em;
    }

    #clH,#clM {
        color: var(--color);
        display: block;
        width: 100%;
        margin: 0;
        text-align: center;
        position: absolute;
        left: 0;
        font-size: 65em;
        text-shadow: .03em .03em .05em #00000008;
    }

    #clH {
        top: 22%;
    }
    #clM {
        top: 58%;
    }

    #bless {
        color: var(--color2);
        display: block;
        width: 100%;
        margin: 0;
        text-align: center;
        position: absolute;
        left: 0;
        top: 7%;
        font-size: 23em;
        transform: translateX(0.3em);
    }

    .title {
        color: var(--color2);
        display: block;
        width: 100%;
        margin: 0;
        text-align: center;
        position: absolute;
        left: 0;
        top: 0.5em;
        font-size: 30em;
    }
}
@media screen and (min-aspect-ratio: 3/1), screen and (min-aspect-ratio: 3/5) and (max-aspect-ratio: 8/7) {
    /*宽*/
    #clH::after {
        content: ":";
        margin-left: 5rem;
    }

    #cY,
    #cM {
        color: var(--color2);
        font-size: 30em;
        position: absolute;
        right: 55%;
        width: 40%;
        text-align: right;
    }

    #cY {
        top: 15%;
    }

    #cM {
        top: 40%;
    }

    #cD {
        color: var(--color);
        display: block;
        width: 40%;
        margin: 0;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 5%;
        font-size: 70em;
        text-shadow: .03em .03em .05em #0001;
    }

    #cW {
        color: var(--color2);
        display: block;
        width: 40%;
        margin: 0;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 71%;
        font-size: 18em;
    }

    #cN {
        color: var(--color3);
        display: block;
        width: 40%;
        margin: 0;
        text-align: center;
        position: absolute;
        right: 50%;
        top: 80%;
        transform: translateY(-50%);
        font-size: 10em;
    }

    #clH,
    #clM {
        color: var(--color);
        display: inline-block;
        margin: 0;
        font-size: 70em;
        text-shadow: .03em .03em .05em #00000008;
    }

    .scl {
        position: absolute;
        top: 30%;
        width: 100%;
        white-space: nowrap;
        text-align: center;
    }

    #bless {
        color: var(--color2);
        display: block;
        width: 100%;
        margin: 0;
        text-align: center;
        position: absolute;
        left: 0;
        top: 8%;
        font-size: 27em;
        transform: translateX(0.5em);
    }

    .title {
        color: var(--color2);
        display: block;
        width: 100%;
        margin: 0;
        text-align: center;
        position: absolute;
        left: 0;
        top: 0.5em;
        font-size: 30em;
    }
}